@property --scroll-position {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scroll-position-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes adjust-pos {
  to {
    --scroll-position: 100;
    --scroll-position-delayed: 100;
  }
}
:root {
  animation: adjust-pos 3s linear both;
  animation-timeline: scroll(root);
}
body {
  transition: --scroll-position-delayed 0.15s linear;
  --scroll-velocity: calc(
    var(--scroll-position) - var(--scroll-position-delayed)
  );
  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
  --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
  --scroll-dynamic: calc(var(--scroll-velocity) / var(--scroll-velocity));
}
